<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路客流量对比 - Apache ECharts 示例</title>
    <link rel="stylesheet" href="css/style.css?v=1.1">
</head>

<body>
    <div class="navbar">
        <a href="index.html">首页</a>
        <a href="traffic_trend.html">客流趋势分析</a>
        <a href="station_ranking.html">站点客流排行</a>
        <a href="funnel_analysis.html">线路站点客流分析</a>
        <a href="line_comparison.html">线路客流量对比</a>
        <a href="transfer_heatmap.html">换乘热度分析</a>
        <a href="poi_analysis.html">站点周边客流特征</a>
        <a href="anomaly_detection.html">异常客流检测</a>
        <a href="od_analysis.html">路径OD分析</a>
        <a href="stop_frequency_usage_analysis.html">站停频率分析</a>
        <a href="dispatch_suggestion.html">智能调度模型</a>
    </div>
    <div class="page-container">
        <div class="chart-header">
            <h2 class="chart-title">不同线路的客流量对比分析</h2>
            <p class="chart-description">
                此饼图直观展示了不同公交和地铁线路的客流量占比。可以识别出核心运营线路和客流较小的线路，这有助于交通部门优化资源配置，例如增加客流大线路的班次，或对低客流线路进行调整，以提高整体运营效率。
            </p>
        </div>
        <div class="kpi-cards-container">
            <div class="kpi-card">
                <h4>客流最高线路</h4>
                <p id="top-line-traffic">--</p>
            </div>
            <div class="kpi-card">
                <h4>客流最低线路</h4>
                <p id="bottom-line-traffic">--</p>
            </div>
            <div class="kpi-card">
                <h4>核心线路 (Top 3)</h4>
                <p id="top-3-lines">--</p>
            </div>
            <div class="kpi-card">
                <h4>分析线路总数</h4>
                <p id="total-lines">--</p>
            </div>
        </div>
        <div id="main" style="width: 100%; height:600px;"></div>
    </div>

    <script src="js/echarts.min.js"></script>
    <script type="text/javascript">
        var lineComparisonChart = echarts.init(document.getElementById('main'));

        fetch('/api/route/passenger_mobility')
            .then(response => response.json())
            .then(data => {
                const chartData = data.map(item => ({
                    name: '线路 ' + item.routeId, // Use routeId as name
                    value: item.totalPassengers
                }));

                // --- KPI Card Calculations for Line Comparison ---
                if (chartData.length > 0) {
                    // Sort data by passenger count
                    const sortedData = [...chartData].sort((a, b) => b.value - a.value);

                    // 1. Total Lines Analyzed
                    document.getElementById('total-lines').innerText = chartData.length;

                    // 2. Top Traffic Line
                    const topLi = sortedData[0];
                    document.getElementById('top-line-traffic').innerHTML = `${topLi.name}<br><small style="font-size: 0.5em;">${topLi.value.toLocaleString()} 人次</small>`;

                    // 3. Bottom Traffic Line
                    const bottomLine = sortedData[sortedData.length - 1];
                    document.getElementById('bottom-line-traffic').innerHTML = `${bottomLine.name}<br><small style="font-size: 0.5em;">${bottomLine.value.toLocaleString()} 人次</small>`;

                    // 4. Top 3 Core Lines - formatted to a single line
                    const top3Lines = sortedData.slice(0, 3).map(line => line.name.replace('线路 ', '')).join(', ');
                    document.getElementById('top-3-lines').innerHTML = top3Lines;
                }
                // --- End of KPI Card Calculations ---

                var lineComparisonOption = {
                    title: {
                        text: '不同线路的客流量对比分析',
                        subtext: '按总客流量占比',
                        left: 'center',
                        textStyle: {
                            color: '#333',
                            fontSize: 20
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} 人次 ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: chartData.map(item => item.name)
                    },
                    series: [
                        {
                            name: '客流量',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: chartData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                formatter: '{b}: {d}%'
                            }
                        }
                    ]
                };

                lineComparisonChart.setOption(lineComparisonOption);
            })
            .catch(error => {
                console.error('获取线路对比数据失败:', error);
                const chartDom = document.getElementById('main');
                chartDom.innerHTML = '<p style="text-align:center;color:red;padding-top:50px;">数据加载失败，请检查后端服务是否正常。</p>';
            });

        window.addEventListener('resize', function () {
            lineComparisonChart.resize();
        });
    </script>
    <script src="js/common.js"></script>
</body>

</html>